<template>
	<view class="main animated fadeIn faster">
		<view class="px-5 d-flex d-flex-middle"
			:style="{'paddingTop':$store.state.statusBarHeight+'px','height': $store.state.titleBarHeight + 'px'}"
			@click="goBack">
			<text class="icon-31fanhui1 iconfont"></text>
		</view>
		<view class="sex" v-if="index == 0">
			<view class="title font34">请选择你的性别 & 生日</view>
			<view class="SexOpt">
				<view class="girl" :class="{'selected' : sex === 2}">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/GIRL%402x.png"
						@click="selectGirl(2)"></image>
				</view>
				<view class="boy" :class="{'selectedBoy' : sex === 1}">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/BOY%402x.png"
						@click="selectGirl(1)"></image>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle" style="margin: 0 auto; width: 600rpx; height: 45px; border-radius: 4px; background: #f6f6f6;"
				   @click="openDatePopup('bottom')">
				<view class="ml-2">{{birthday? birthday : '选择日期'}}</view>
				<uni-icons class="mr-1" type="down" size="20"></uni-icons>
			</view>
		</view>
		<view class="name" v-if="index == 1">
			<view class="title font34">请选择你的头像 & 昵称</view>
			<view class="optbox">
				<view class="desc font24 mt-6">上传头像或选择一个默认头像</view>
				<view class="AvatarList">
					<view class="item" :class="{'oimg':avatarIndex == index}" v-for="(i,index) in AvatarList" :key="i.id" @click="chooseImg(index)">
						<image :src="i.url"></image>
					</view>
				</view>
				<view class="uploadBox" @click="chooseImage">
					<image class="rounded" :src="avatar?avatar:'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241219105724-192be135-e6c8-4b1e-86b5-2b97681bbd44.png'" mode="aspectFill" style="width: 120rpx; height: 120rpx;"></image>
				</view>
				<view class="input" @click="open('center')">
					<view class="text">{{name}}</view>
					<view class="icon">
						<image
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%88%B7%E6%96%B0.png" @click.stop="selectRefresh">
						</image>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff" border-radius="8px 8px 8px 8px">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="text-center font32">修改昵称</view>
					<input class="uni-input" maxlength="9" v-model="name" focus/>
					<view class="desc">最多可输入9个字符，支持中英文、数字、表情符号</view>
					<view class="btn position-absolute">
						<view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="close">取消</view>
						<view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="confirm">确认</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<uni-popup ref="DatePopup" background-color="#fff" border-radius="16px 16px 16px 16px" style="z-index: 999; overflow: hidden;">
			<view class="d-flex d-flex-between pb-6 mt-6 px-6">
				<view style="color: #9E9D9D;;" @click="ColseDatePopup">取消</view>
				<view style="color: #66CCCC;;" @click="dateconfirm">确认</view>
			</view>
			<view class="popup-content px-2 pb-4" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" style="height: 450rpx; width: 100%;">
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		<view class="next" @click="next" :style="{background: this.birthday? '#d0f3fc' : '#e7e7e7'}">
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%AE%AD%E5%A4%B4%402x.png">
			</image>
		</view>
	</view>
</template>

<script>
	import { uploadImageApi } from "../../http/uploadImage";
	import {userApi} from "@/http/userApi.js";
	import store from '@/store/index.js';
	import { mapActions } from 'vuex'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
			    years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
			    days.push(i)
			}
			return {
				visible: true,
				value: [9999, month - 1, day - 1],
				indicatorStyle: `height: 50px;`,
				years,
				year,
				months,
				month,
				days,
				day,
				birthday: "",
				single: '',
				index: 0,
				name: '秀丽的念旧',
				AvatarList: [{
						id: 0,
						url: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/girl.png'
					},
					{
						id: 1,
						url: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%206%402x.png'
					},
					{
						id: 2,
						url: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%208%402x.png'
					},
					{
						id: 3,
						url: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%205%402x.png'
					}
				],
				avatarIndex:0,
				avatar:'',
				sex: 1
			};
		},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			async next() {
				if (this.index == 0) {
					if(!this.birthday) {
						uni.showToast({
							title:'请选择生日！',
							icon:'none'
						})
						return
					}
					this.index++
				} else if (this.index == 1) {
					if(!this.avatar){
						uni.showToast({
							title:'请选择头像！',
							icon:'none'
						})
						return
					}
					try {
						await userApi.editUserInfo({
							gender: this.sex,
							birthday: this.single,
							avatar: this.avatar,
							nickname: this.name
						})
						store.commit('refresh',{gender: this.sex,birthday: this.single,avatar: this.avatar,nickname: this.name})
						uni.navigateTo({
							url: "/pagesMain/hobby/hobby"
						})
					} catch (e) {
						console.log(e)
					}
				}
			},
			chooseImg(index){
				this.avatar = this.AvatarList[index].url
			},
			async uploadImg(files) {
				let res = await uploadImageApi.Upload(files)
				this.avatar = res.data
			},
			chooseImage: async function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						this.uploadImg(res.tempFilePaths[0])
					},
					fail: (err) => {
						console.log("err: ",err);
					}
				})
			},
			open(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			close() {
				this.$refs.popup.close()
			},
			selectGirl(val) {
				this.sex = val
			},
			confirm() {
				this.$refs.popup.close()
			},
			goBack() {
				if (this.index === 1) {
					this.index--
				} else if (this.index === 0) {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			openDatePopup(type) {
				this.type = type
				this.$refs.DatePopup.open(type)
			},
			ColseDatePopup() {
				this.$refs.DatePopup.close()
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			dateconfirm() {
				let that = this;
				that.birthday = that.year + "-" + that.month + "-" + that.day
				that.$refs.DatePopup.close()
				console.log(that.birthday);
			},
			async selectRefresh() {
				let res = await userApi.refreshUserName();
				this.name = res
			}
		}
	}
</script>

<style lang="scss">
.main {
	background-color: #fff;
	background-image: none;
	position: relative;
	.name {
		overflow: hidden;
	}
	.title {
		background-color: #fff;
		text-align: center;
		color: #333333;
		padding-top: 340rpx;
	}
	.SexOpt {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
		margin: 100rpx auto 40rpx;
		.girl, .boy {
			image {
				width: 260rpx;
				height: 260rpx;
			}
		}
		.selected {
			border: 2rpx solid #fa2c19;
			border-radius: 40rpx;
		}
		.selectedBoy {
			border: 2rpx solid #66CCCC;
			border-radius: 40rpx;
		}
	}
	.example-body {
		width: 600rpx;
		margin: 60rpx auto 0;
		position: relative;
		.uni-date {
			.uni-date-editor {
				.uni-date-x--border {
					border: none;
					border-radius: 15rpx;
					.uni-date-single {
						padding: 10rpx 0;
						background-color: #f6f6f6;
						border-radius: 15rpx;
						padding-left: 10rpx;
						color: #333333;
						.uni-icons {
							display: none;
						}
					}
				}
			}
		}
		.icon {
			position: absolute;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.optbox {
		position: absolute;
		left: 50%;
		width: 78%;
		height: 300rpx;
		margin-top: 100rpx;
		transform: translateX(-50%);
		border-radius: 40rpx;
		background-color: #F6F6F6;
		.desc {
			text-align: center;
			color: #9E9D9D;
			margin-top: 80rpx;
		}
		.AvatarList {
			display: flex;
			justify-content: space-around;
			margin-top: 45rpx;
			.item {
				width: 120rpx;
				height: 120rpx;
				image {
					width: 100%;
					height: 100%;
				}
				.oimg{
					border: solid 1px #fa2c19;
					border-radius: 120rpx;
				}
			}
		}
		.uploadBox{
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			background-color: #ffffff;
			border: solid 1px #eeeeee;
			position: relative;
			top: -330rpx;
			left: calc(50% - 50rpx);
		}
	}
	.input {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		margin: -60rpx auto;
		padding: 25rpx 0;
		background-color: #f6f6f6;
		border-radius: 15rpx;
		padding-left: 25rpx;
		color: #333333;
		.text {
			flex: 1;
		}
		.icon {
			margin-right: 20rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				transform: rotateZ(120deg);
			}
		}
	}
	.next {
		position: absolute;
		bottom: 300rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40%;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
	.btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
		font-size: 32rpx;
		.cancle {
			color: #9E9D9D;
		}
		.confirm {
			color: #66CCCC;
		}
	}
	.popup-content {
		color: #1f1f1f;
		padding: 40rpx 60rpx 0;
		input {
			box-sizing: border-box;
			border-radius: 10rpx;
			color: #333333;
			font-size: 26rpx;
			width: 100%;
			margin-top: 50rpx;
			height: 70rpx;
			padding-left: 20rpx;
			background-color: #efefef;
		}
		.desc {
			margin-top: 25rpx;
			font-size: 22rpx;
			color: #888888;
		}
		.btn {
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			border-top: 1px solid #ededed;
		}
	}
	.uni-popup__wrapper {
		height: 210px;
		border-radius: 50rpx;
	}
	.picker-view .picker-view-column .item {
		height: 50px !important;
		line-height: 50px !important;
	}
}
</style>
